<template>
  <div class="detail-wrapper">
    <div class="detail-header-wrapper">
      <div class="detail-header">
        <div class="detail-header-left">
          <img :src="course.image">
        </div>
        <div class="detail-header-right">
          <div class="course-name">{{'' + course.name + ''}}</div>
          <div class="course-span">
          <span class="course-span-time">
            <el-icon class="el-icon-time"></el-icon>
            {{course.time | formatSecond}}</span>
            <span class="course-span-level">{{COURSE_LEVEL | optionKV(course.level)}}</span>
            <span class="course-span-enroll">{{course.enroll}}人报名</span>
          </div>
          <div class="course-summary">{{course.summary}}</div>
          <div class="course-price">￥{{course.price}}.00</div>
          <el-button size="medium" type="primary" @click="enroll()" v-show="!memberCourse.id">立即报名</el-button>
          <el-button size="medium" type="success" v-show="memberCourse.id">您已报名</el-button>
        </div>
      </div>
    </div>
    <div class="detail-content-wrapper">
      <div class="detail-content">
        <div class="detail-chapter-wrapper">
          <div class="detail-chapter" v-for="(chapter, i) in chapters" :key="i">
            <div class="detail-chapter-info">
              <span>第 {{i + 1}} 章 :  </span>
              <span class="detail-chapter-name">{{chapter.name}}</span>
            </div>

            <div class="detail-chapter-section" v-for="(section, j) in chapter.sections" :key="j">
              <div class="left">
                <i class="el-icon-video-camera"></i>
                <div class="detail-chapter-section-video">视频 : </div>
                <el-link class="detail-chapter-section-name"
                         @click="play(section)"
                         :underline="false">{{i + 1}}-{{j + 1}} {{section.title}}</el-link>
                <el-tag class="detail-chapter-section-tag" v-show="section.charge === 'F'" size="mini" effect="dark" type="danger">试看</el-tag>
              </div>
              <div class="right">
                <el-tag effect="plain" size="small"><span>({{section.time | formatSecond}})</span></el-tag>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
          <el-empty :image-size="200" style="padding-top: 100px" description="暂无章节" v-show="chapters.length === 0"></el-empty>
        </div>
        <div class="detail-teacher-wrapper">
          <el-image :src="teacher.image"></el-image>
          <div class="card-body">
            <h5 class="card-title">讲师 : {{teacher.name}}</h5>
            <p class="card-text">职位 : {{teacher.position}}</p>
            <p class="card-text">&nbsp;&nbsp;&nbsp;&nbsp;{{teacher.intro}}</p>
          </div>
        </div>
      </div>
    </div>

    <modal-player ref="modalPlayer"></modal-player>

  </div>
</template>

<script>
  import ModalPlayer from "../components/modal-player";
  import Notify from "../util/notify";
  export default {
    name: "detail",
    components: {ModalPlayer},
    data: function () {
      return {
        id: '00000001',
        course: {},
        teacher: {},
        chapters: [],
        sections: [],
        memberCourse: {},
        COURSE_LEVEL: COURSE_LEVEL,
        SECTION_CHARGE: SECTION_CHARGE
      }
    },
    mounted() {
      let _this = this
      _this.id = _this.$route.query.id;
      _this.findCourse()

      /**
       * 监听事件总线, 在the-login-dialog.vue的login()中被调用
       */
      _this.$event.$on('getEnroll', () => {
        _this.getEnroll()
      })
    },
    methods: {
      findCourse() {
        let _this = this;
        _this.$axios.get(process.env.VUE_APP_SERVER + '/business/web/course/find/' + _this.id).then((response) => {
          let resp = response.data;
          _this.course = resp.content;
          _this.teacher = _this.course.teacher || {};
          _this.chapters = Tool.sortAsc(_this.course.chapters, 'sort') || [];
          _this.sections = _this.course.sections || [];

          // 获取报名信息
          _this.getEnroll();

          // 将所有的节放入对应的章中
          for (let i = 0; i < _this.chapters.length; i++) {
            let c = _this.chapters[i];
            c.sections = [];
            for (let j = 0; j < _this.sections.length; j++) {
              let s = _this.sections[j];
              if (c.id === s.chapterId) {
                c.sections.push(s);
              }
            }

            Tool.sortAsc(c.sections, 'sort')
          }
          console.log('_this.course.image ----- ' + _this.course.image)
        })
      },

      /**
       * 报名
       */
      enroll() {
        let _this = this;
        let loginMember = Tool.getLoginMember()
        if (Tool.isEmpty(loginMember)) {
          Notify.warning("请先登录")
          // 触发打开登录窗口事件, 用到事件总线, 在the-log-dialog.vue中监听
          _this.$event.$emit('openLoginDialog')
          return
        }
        _this.$axios.post(process.env.VUE_APP_SERVER + '/business/web/member-course/enroll', {
          courseId: _this.course.id,
          memberId: loginMember.id
        }).then((resp)=>{
          if (resp.data.success) {
            _this.memberCourse = resp.data.content
            Notify.success("报名成功！")
          } else {
            Notify.warning(resp.message)
          }
        })
      },

      /**
       * 获取报名
       */
      getEnroll() {
        let _this = this
        let loginMember = Tool.getLoginMember()
        if (Tool.isEmpty(loginMember)) {
          return
        }
        _this.$axios.post(process.env.VUE_APP_SERVER + '/business/web/member-course/get-enroll', {
          courseId: _this.course.id,
          memberId: loginMember.id
        }).then((resp)=>{
          if (resp.data.success) {
            _this.memberCourse = resp.data.content || {}
          }
        })
      },

      /**
       * 播放视频
       * @param section
       */
      play(section) {
        let _this = this;
        if (section.charge === _this.SECTION_CHARGE.CHARGE.key ) {
          let loginMember = Tool.getLoginMember();
          if (Tool.isEmpty(loginMember)) {
            Notify.warning("请先登录")
            return;
          } else {
            if (Tool.isEmpty(_this.memberCourse)) {
              Notify.warning("请先报名")
              return;
            }
          }
        }
        if (section.vod) {
          _this.$refs.modalPlayer.playVod(section.vod)
        } else {
          Notify.warning('该小节暂无视频上传, 敬请期待')
        }
      },
    }
  }
</script>

<style lang="less">
  .detail-wrapper {
    width: 100%;

    .detail-header-wrapper {
      width: 100%;
      box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
      //background-color: #F3F6F5;
      background-image: radial-gradient(circle,#ffffff, #ffffff, #d2e6e3);

      .detail-header {
        width: 1200px;
        margin: auto;
        height: 400px;
        padding: 30px 0;
        display: flex;

        .detail-header-left {
          width: 600px;

          img {
            border-radius: 10px;
            height: 322px;
          }
        }

        .detail-header-right {
          width: 500px;
          display: block;
          padding-left: 50px;

          .course-name {
            font-weight: 500;
            font-size: 30px;
            margin-bottom: 30px;
          }

          .course-span {
            margin-bottom: 20px;

            .course-span-time {
              margin-right: 10px;
            }

            .course-span-level {
              margin-right: 10px;
            }

            .course-span-enroll {

            }
          }

          .course-summary {
            margin-bottom: 40px;
          }

          .course-price {
            color: #ea0001;
            font-weight: bold;
            font-size: 36px;
            margin-bottom: 10px;
          }
        }
      }
    }

    .detail-content-wrapper {
      width: 100%;
      //background-image: linear-gradient(#d2e6e3, #ffffff, #ffffff, #ffffff);


      .detail-content {
        width: 1200px;
        margin: auto;
        display: flex;
        padding-top: 40px;

        .detail-chapter-wrapper {
          width: 850px;
          margin-right: 50px;
          padding: 20px;
          box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
          background-color: white;
          border-radius: 10px;

          .detail-chapter {
            margin-bottom: 20px;

            .detail-chapter-info {
              font-weight: 700;
              font-size: 18px;
              line-height: 24px;
              color: #1c1f21;
              margin-bottom: 20px;

              .detail-chapter-name {

              }
            }

            .detail-chapter-section {
              margin-bottom: 10px;
              font-size: 14px;
              display: flex;
              justify-content: space-between;

              .left {
                display: flex;


                .el-tag {
                  margin-left: 15px;

                }

                i {
                  line-height: 26.5px;
                  margin-right: 10px;
                }

                .detail-chapter-section-video {
                  margin-right: 10px;
                  font-weight: bold;
                }

                .detail-chapter-section-name {
                  display: inline-block;
                  max-width: 600px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  vertical-align: middle;
                }

                .detail-chapter-section-tag {
                  margin-left: 50px;
                }
              }

              .right {

                span {
                  font-size: 12px;
                  margin: auto;
                }
              }
            }
          }
        }

        .detail-teacher-wrapper {
          width: 300px;
          padding: 20px;
          box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
          background-color: white;
          border-radius: 10px;

          h5 {
            font-size: 24px;
          }
        }
      }
    }
  }
</style>